<!doctype html>

<html>
	<head>
		<title>jQuery Annex Testcase Scenario</title>
		
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
		
		<style type="text/css">
			.validationerror {
				border: 3px solid red;
			}
		</style>
		
		<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
		<script type="text/javascript" src="jquery.annex.js"></script>
		<script type="text/javascript" src="jquery.annex.validation-plugin.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
			
				// defines if validation is triggered by widget events such as change and blur or only manually/by form submit
				$.validationIsTriggeredByWidgetEvents(true);
				
				// adds additional widget events to all widgets, default events are change and blur, must be called before setting validators
				$.setAdditionalValidationWidgetEvents(['keyup']);

				// callback to execute when all validations have finished (global callback)
				$.executeOnValidation(function(success, messages){
					$('#messages').empty();

					if( !success){
						$.each(messages, function(index, value){
							$('#messages').append($.elem('p').text(value));
						});
					}
				});

				// trigger collection of validation from data-validation-attributes
				$.setValidationFromTags();
				
				// set validation on form element through js-hooks
				// validation is always an array of plain objects, representing rules
				// the first key is the rule name, referencing the error message
				// optionally a rule takes an array of args through second attribute args
				
				// is required, has to have a length between 3 and 8, has a customcase based on value length,
				// has a asynchronous customcase based on a ajax-request on a remote file,
				// has a validation success handler especially for this element,
				// defines body as form-element holder instead of closest form
				$('#test').setValidation(
					[
						{required : 'needs a value'},
						{rangelength : 'too short or too long', args : [3, 8]},
						{customcase : 'shorter 4 needs to be "test"', args : function(){ return (($('#test').val().length <= 4) && ($('#test').val() == 'test')) || ($('#test').val().length > 4); }},
						{customcase_async : 'remote file missing', args : function(callback, errorCallback){
							$.get('plugin-validation-example.html')
								.done(function(data){ callback(($('#test').val().length <= 10) ? true : 'too short'); })
								.fail(errorCallback)
							;
						}}
					],
					function(success, messages, $target){
						// do something
					},
					null,
					$('body')
				);
				
				// is required to have a non empty value, with "---" defined as empty,
				// has to be at least 2 characters long,
				// has to have a value between 5 and 42
				$('#test2').setValidation(
					[
						{notempty : 'has to have a value', args : ['---']},
						{minlength : 'too short', args : 2},
						{range : 'out of range', args : [5, 42]}
					]
				);


				// needs to be an email address,
				// sets the closest fieldset as errorcontainer, to mark errors correctly
				$(':radio[name=test3]').setValidation(
					[
						{email : 'this is no email address'}
					],
					null,
					$(':radio[name=test3]').closest('fieldset')
				);

				// needs to be an url,
				// is set optional, so doesn't need a value,
				// sets the closest fieldset as errorcontainer, to mark errors correctly
				$(':checkbox[name=test4]').setValidation(
					[
						{url : 'this is no url'},
						{optional : null}
					],
					null,
					$(':checkbox[name=test4]').closest('fieldset')
				);
				
				// possible removal of validation added beforehand, uncomment to use
				// $(':checkbox[name=test4]').unsetValidation();
				
				// trigger all validations manually once everything is in place
				$.triggerValidation();
			});
		</script>
	</head>
	
	<body>
		<div id="messages"></div>

		<fieldset>
			<input id="test" name="test" type="text" value="test"/>
		</fieldset>

		<fieldset>
			<select id="test2" name="test2">
				<option>---</option>
				<option>1</option>
				<option>13</option>
				<option>aaa</option>
			</select>
		</fieldset>

		<fieldset>
			<label><input type="radio" name="test3" value="abc"/>abc</label>
			<label><input type="radio" name="test3" value="elefant@toast.de"/>elefant@toast.de</label>
			<label><input type="radio" name="test3" value="fischer@fru"/>fischer@fru</label>
		</fieldset>

		<fieldset>
			<label><input type="checkbox" name="test4" value="tatutata"/>tatutata</label>
			<label><input type="checkbox" name="test4" value="http://www.google.com"/>http://www.google.com</label>
			<label><input type="checkbox" name="test4" value="https://lustiger.augu.st"/>https://lustiger.augu.st</label>
		</fieldset>
		
		<fieldset>
			<input id="test5" name="test5" type="text" value="01/13/2013" data-validation='{"date" : "needs to be an american date"}'/>
			<input id="test6" name="test6" type="text" value="01:30am" data-validation='{"time" : "needs to be an american time"}'/>
			<input id="test7" name="test7" type="text" value="12/1/2012 12:30:59 pm" data-validation='{"datetime" : "needs to be an american datetime"}'/>
		</fieldset>

		<fieldset>
			<input id="test5" name="test8" type="text" value="2002-12-01" data-validation='{"dateISO" : "needs to be an ISO-date"}'/>
			<input id="test6" name="test9" type="text" value="23:59:59" data-validation='{"timeISO" : "needs to be an ISO-time"}'/>
			<input id="test7" name="test10" type="text" value="2012-12-13T13:13:13" data-validation='{"datetimeISO" : "needs to be an ISO-datetime"}'/>
		</fieldset>

		<fieldset>
			<input id="test5" name="test11" type="text" value="01.12.2002" data-validation='{"dateDE" : "needs to be a german date"}'/>
			<input id="test6" name="test12" type="text" value="13:13h" data-validation='{"timeDE" : "needs to be a german time"}'/>
			<input id="test7" name="test13" type="text" value="13.12.2012 12:30:59" data-validation='{"datetimeDE" : "needs to be a german datetime"}'/>
		</fieldset>

		<fieldset>
			<input id="test" name="test14" type="text" value="100.1" data-validation='{"number" : "needs to be an american number"}'/>
			<input id="test" name="test15" type="text" value="100,1" data-validation='{"numberDE" : "needs to be a german number"}'/>
			<input id="test" name="test16" type="text" value="100" data-validation='{"digits" : "needs to be only digits"}'/>
		</fieldset>

		<fieldset>
			<input id="test" name="test17" type="text" value="123-1234-1234-1234" data-validation='{"creditcard" : "needs to be a creditcard number"}'/>
			<input id="test" name="test18" type="text" value="abcdefg" data-validation='{"characterclass" : "has to be of regex characterclass", "args" : "a-z"}'/>
		</fieldset>
	</body>
</html>